<template>
  <div class="login-container">
    <el-form class="login-form" :rules="rules" ref="ruleForm" :model="user">
      <div class="login-header"></div>
      <el-form-item prop="mobile">
        <i style="position: absolute;top: 14px;z-index:100;margin-left:16px" class="el-icon-mobile-phone"></i>
        <el-input  placeholder="请输入手机号" v-model="user.mobile">
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <i style="position: absolute;top: 14px;z-index:100;margin-left:16px" class="el-icon-lock"></i>
        <el-input placeholder="请输入验证码" v-model="user.code"></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="user.agree"
          >我已阅读并同意用户协议和隐私条款</el-checkbox
        >
      </el-form-item>
      <el-form-item>
        <el-button
          class="login-btn"
          type="primary"
          :loading="isLoginSucess"
          @click="onLogin('ruleForm')"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Login } from "@/api/Login/login";
export default {
  name: "LoginIndex",
  data() {
    return {
      user: {
        mobile: "13911111111", // 手机号
        code: "246810", // 验证码
        agree: false, // 是否同意协议
      },
      isLoginSucess: false,
      rules: {
        mobile: [
            { required: true, message: "请输入手机号码", trigger: 'blur' },
            { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ ,message: '手机号格式错误'}

         ],
        code: [
            { required: true, message: "请输入验证码", trigger: 'blur' },
            { pattern: /^\d{6}$/, message: '验证码格式错误'}
        ],
        agree: [
            { validator: (rule, value, callback) =>{
                if(value){
                    callback()
                }else{
                    callback(new Error('请勾选用户并同意用户协议'))
                }
            }, 
            trigger: 'change' }
        ]
      },
    };
  },
  methods: { 
    onLogin() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let userInfo = { mobile:this.user.mobile, code:this.user.code}  
          this.isLoginSucess = true;
          this.$store.dispatch('adminLogin', userInfo)
          this.isLoginSucess = false;
        }else{
            return 
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./login.jpg") no-repeat;
  background-size: cover;
  .login-form {
    background-color: #fff;
    padding: 50px;
    min-width: 300px;
    .el-input {
    /deep/.el-input__inner{
          padding: 0 42px ; 
        }
      }
    .login-header {
      position: relative;
      width: 100%;
      height: 40px;
      background: url("./logo_index.png") no-repeat center;
      background-size: contain;
      margin-bottom: 20px;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>>
